<template>
  <div class="map-container">
    <div id="map" class="map"></div>

    <!-- 工具栏 -->
    <div class="toolbar">
      <button @click="showPoints">显示点</button>
      <button @click="showLines">显示线</button>
      <button @click="showPolygons">显示面</button>
      <button @click="clearAll">清除</button>
    </div>
  </div>
</template>

<script>
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

export default {
  name: 'LeafletDemo',

  data() {
    return {
      map: null,
      layerGroup: null,
      customIcon: null,
      // 预定义的点位数据
      points: [
        {
          latlng: [39.90923, 116.397428],
          name: '天安门',
          pulse: {
            enable: true,
            duration: 3,    // 动画持续时间(秒)
            delay: 1,       // 动画间隔时间(秒)
            scale: 2        // 扩散范围倍数
          }
        },
        {
          latlng: [39.904989, 116.405285],
          name: '王府井',
          pulse: { enable: false }
        },
        {
          latlng: [39.906901, 116.391244],
          name: '西单',
          pulse: {
            enable: true,
            duration: 2,
            delay: 0.5,
            scale: 3
          }
        },
        {
          latlng: [39.899332, 116.384657],
          name: '复兴门',
          pulse: false
        },
        {
          latlng: [39.914889, 116.403874],
          name: '北海公园',
          pulse: true
        }
      ],
      // 预定义的线数据
      lines: [
        {
          path: [
            [39.90923, 116.397428],
            [39.904989, 116.405285],
            [39.906901, 116.391244]
          ],
          name: '路线1'
        },
        {
          path: [
            [39.899332, 116.384657],
            [39.914889, 116.403874]
          ],
          name: '路线2'
        }
      ],
      // 预定义的面数据
      polygons: [
        {
          path: [
            [39.913, 116.395],
            [39.913, 116.405],
            [39.905, 116.405],
            [39.905, 116.395]
          ],
          name: '区域1'
        },
        {
          path: [
            [39.895, 116.385],
            [39.895, 116.395],
            [39.885, 116.395],
            [39.885, 116.385]
          ],
          name: '区域2'
        }
      ]
    };
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      // 创建自定义图标
      this.customIcon = L.icon({
        iconUrl: '/images/markers/cjyl.gif',
        // iconUrl: '/images/markers/PP_CJ.png',
        iconSize: [22, 22],     // 图标大小
        iconAnchor: [11, 22],   // 调整锚点到图标底部中心
        popupAnchor: [0, -20]   // 弹出框锚点（相对于图标锚点）
      });

      // 创建地图
      this.map = L.map('map').setView([39.90923, 116.397428], 13);

      // 添加高德地图图层
      L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
        subdomains: ['1', '2', '3', '4'],
        attribution: '© 高德地图'
      }).addTo(this.map);

      // 创建图层组
      this.layerGroup = L.layerGroup().addTo(this.map);
    },

    showPoints() {
      this.clearAll();
      this.points.forEach(point => {
        if (point.pulse?.enable) {
          const pulseIcon = L.divIcon({
            className: 'custom-pulse-icon',
            html: `
              <div class="pulse-ring ring1"></div>
              <div class="pulse-ring ring2"></div>
              <div class="pulse-ring ring3"></div>
            `,
            iconSize: [66, 66],
            iconAnchor: [33, 44]
          });
          
          // 创建扩散标记并保存引用
          const pulseMarker = L.marker(point.latlng, { 
            icon: pulseIcon,
            zIndexOffset: -100
          });
          
          // 添加到图层组
          this.layerGroup.addLayer(pulseMarker);
          
          // 3秒后移除扩散图层
          setTimeout(() => {
            this.layerGroup.removeLayer(pulseMarker);
          }, 3000);
        }

        // 添加标记点（在中间层）
        L.marker(point.latlng, {
          icon: this.customIcon,
          zIndexOffset: 100    // 设置中等的 z-index
        })
          .bindPopup(
            `<div class="custom-popup">
              <h3 class="popup-title">${point.name}</h3>
              <p class="popup-body">这是一个标记点</p>
            </div>`,
            {
              className: 'custom-popup-wrapper',
              closeButton: false,
              offset: [0, -10],
              openOnClick: false,
              autoClose: true,
              closeOnClick: false
            }
          )
          .on('mouseover', function (e) {
            this.openPopup();
          })
          .on('mouseout', function (e) {
            this.closePopup();
          })
          .addTo(this.layerGroup);

        // 添加标签（在最上层）
        L.marker(point.latlng, {
          icon: L.divIcon({
            className: 'marker-label',
            html: `<span>${point.name}</span>`,
            iconSize: [100, 20],
            iconAnchor: [50, 40]
          }),
          zIndexOffset: 200   // 设置最高的 z-index，确保在最上层
        }).addTo(this.layerGroup);
      });
    },

    showLines() {
      this.clearAll();
      this.lines.forEach(line => {
        L.polyline(line.path, {
          color: '#409EFF',
          weight: 3
        })
          .bindPopup(
            `<div class="custom-popup">
              <div class="popup-title">${line.name}</div>
              <div class="popup-body">这是一条路线</div>
            </div>`,
            {
              className: 'custom-popup-wrapper',
              closeButton: false
            }
          )
          .addTo(this.layerGroup);
      });
    },

    showPolygons() {
      this.clearAll();
      this.polygons.forEach(polygon => {
        L.polygon(polygon.path, {
          color: '#409EFF',
          fillColor: '#409EFF',
          fillOpacity: 0.2,
          weight: 2
        })
          .bindPopup(
            `<div class="custom-popup">
              <div class="popup-title">${polygon.name}</div>
              <div class="popup-body">这是一个区域</div>
            </div>`,
            {
              className: 'custom-popup-wrapper',
              closeButton: false
            }
          )
          .addTo(this.layerGroup);
      });
    },

    clearAll() {
      this.layerGroup.clearLayers();
    }
  },

  beforeDestroy() {
    if (this.map) {
      this.map.remove();
    }
  }
};
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.map {
  width: 100%;
  height: 100%;
}

.toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  gap: 8px;
}

.toolbar button {
  padding: 8px 15px;
  border: 1px solid #dcdfe6;
  background: white;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
  font-size: 14px;
  color: #606266;
}

.toolbar button:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

::v-deep .custom-popup-wrapper {
  margin-bottom: 5px;
}

::v-deep .leaflet-popup-content-wrapper {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  padding: 0 !important;
}

::v-deep .leaflet-popup-content {
  margin: 0;
  min-width: 150px;
}

::v-deep .custom-popup {
  padding: 10px 12px;
  text-align: center;

  .popup-title {
    font-weight: bold;
    font-size: 14px;
    color: #303133;
    margin-bottom: 4px;
  }

  .popup-body {
    font-size: 12px;
    color: #606266;
    line-height: 1.4;
  }
}

::v-deep .leaflet-popup-tip-container {
  margin-top: -1px;
}

::v-deep .leaflet-popup-tip {
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* 添加悬浮效果 */
::v-deep .leaflet-interactive:hover {
  cursor: pointer;
}

/* 标记文本样式 */
::v-deep .marker-label {
  background: none;
  border: none;
  text-align: center;
}

::v-deep .marker-label span {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  transform: translateY(-5px);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 悬浮效果 */
::v-deep .marker-label:hover span {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-8px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 自定义脉冲扩散效果 */
::v-deep .custom-pulse-icon {
  .pulse-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 2px solid #ff0000;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: pulse-spread 3s ease-out infinite;
  }

  .ring1 {
    animation-delay: 0s;
  }

  .ring2 {
    animation-delay: 1s;
  }

  .ring3 {
    animation-delay: 2s;
  }
}

@keyframes pulse-spread {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
</style> 